<template>
  <div class="film-list">

    <el-form ref="form" :model="form" label-width="90px" :rules="rules">

      <el-form-item label="电影封面" :required="form.cover?false:true">
        <el-upload
          class="upload-demo"
          drag
          accept=".png,.jpg"
          :limit="1"
          :headers="header"
          :action="uploadAction"
          :before-upload="beforeUpload"
          :on-success="handleUploadSuccess"
          :on-exceed="handleExceed"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过20MB</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="电影封面" prop="url" v-show="false" :required="this.url?false:true">
        <el-input v-model="this.url"></el-input>
      </el-form-item>

      <el-form-item label="电影名称" prop="name" :required="form.name?false:true">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="上映地区" prop="region" :required="form.region?false:true">
        <el-select v-model="form.region" placeholder="请选择上映区域">
          <el-option label="内地" value="内地"></el-option>
          <el-option label="香港" value="香港"></el-option>
          <el-option label="台湾" value="台湾"></el-option>
          <el-option label="日本" value="日本"></el-option>
          <el-option label="美国" value="美国"></el-option>
          <el-option label="韩国" value="韩国"></el-option>
          <el-option label="英国" value="英国"></el-option>
          <el-option label="英国" value="英国"></el-option>
          <el-option label="法国" value="法国"></el-option>
          <el-option label="印度" value="印度"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="放映类型" prop="showType" :required="form.showType?false:true">
        <el-select v-model="form.showType" placeholder="请选择放映类型">
          <el-option label="2D 放映" value="2D放映"></el-option>
          <el-option label="3D 放映" value="3D放映"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="全片时长" prop="duration">
        <el-input-number v-model="form.duration" :min="10" :max="550"></el-input-number>
        <span>  /min</span>
      </el-form-item>

      <el-form-item label="上映时间" prop="releaseTime">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.releaseTime"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="即时上架" prop="status" :required="form.status?false:true">
        <el-switch v-model="form.status"></el-switch>
      </el-form-item>

      <el-form-item label="电影类型" prop="type" :required="form.type?false:true">
        <el-radio-group v-model="form.type">
          <el-radio style="padding-bottom: 20px" label="爱情"></el-radio>
          <el-radio label="喜剧"></el-radio>
          <el-radio label="科幻"></el-radio>
          <el-radio label="动画"></el-radio>
          <el-radio label="剧情"></el-radio>
          <el-radio style="padding-bottom: 20px" label="恐怖"></el-radio>
          <el-radio label="悬疑"></el-radio>
          <el-radio label="冒险"></el-radio>
          <el-radio label="动作"></el-radio>
          <el-radio style="padding-bottom: 20px" label="犯罪"></el-radio>
          <el-radio label="历史"></el-radio>
          <el-radio label="古装"></el-radio>
          <el-radio label="战争"></el-radio>
          <el-radio label="纪录片"></el-radio>
          <el-radio style="padding-bottom: 20px" label="家庭"></el-radio>
          <el-radio label="传记"></el-radio>
          <el-radio label="武侠"></el-radio>
          <el-radio label="儿童"></el-radio>
          <el-radio label="短片"></el-radio>
          <el-radio label="其他"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="内容简介" prop="introduction" :required="form.introduction?false:true">
        <el-input rows="8" type="textarea" v-model="form.introduction"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认提交</el-button>
        <el-button type="danger" @click="resetForm()" plain>清空</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
  import {AddFilm} from "@/api/film";
  import config from "@/config";

  export default {
    data() {
      const isEmpty = (rule, value, callback) => {
        if (value == '') {
          callback(new Error(rule.message))
        } else {
          callback()
        }
      };
      return {
        rules: {
          url: [
            { validator: isEmpty, message: '请上传电影封面！', trigger: 'blur' }
          ],
          name: [
            {  required: true, message: '电影名称不能为空！', trigger: ['blur','change'] }
          ],
          region: [
            { required: true, message: '上映地区不能为空！', trigger: 'blur' }
          ],
          showType: [
            { required: true, message: '放映类型不能为空！', trigger: 'blur' }
          ],
          duration: [
            { required: true, message: '全片时长不能为空！', trigger:  'change' }
          ],
          releaseTime: [
            { required: true, message: '上映时间不能为空！', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '即时上架不能为空！', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '电影类型不能为空！', trigger: 'blur' }
          ],
          introduction: [
            { validator: isEmpty, message: '内容简介不能为空！', trigger: ['blur','change'] }
          ],
        },
        header: {
          "Authorization": localStorage.getItem("token")
        },
        uploadAction: config.API_URL + '/upload',
        url: '',
        form: {
          cover: 'null',
          name: '',
          region: '',
          releaseTime: '',
          duration: 120,
          introduction: '',
          type: '',
          status: true,
        }
      }
    },
    methods: {
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.form.cover = this.url;
            const film = this.form;
            AddFilm(film).then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '电影添加成功!'
                });
                this.$router.push("/film/list")
              }
            })
          } else {
            this.$message.error('请先完善表单相关信息！');
            return false;
          }
        });
      },

      beforeUpload(file) {
        let isLt10M = file.size / 1024 / 1024 / 20 < 1
        if(!isLt10M) {
          this.$message.error("上传文件大小不能超过 20MB!")
        }
        return isLt10M;
      },

      handleExceed(files, fileList) {
        this.$message.warning('超出1个文件，请先删除当前文件，再重新上传')
        return false
      },

      handleUploadSuccess(res) {
        this.url = res;
      },

      resetForm() {
        this.$refs.form.resetFields()
      },

    }
  }
</script>

<style scoped>
  .film-list {
    padding: 20px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
